<template>
  <div class="app-attribute">
    <el-row>
      <el-col :span="24">
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <el-button
        v-btnPermission:add
        type="primary"
        icon="el-icon-plus"
        @click="switchHandle('add')"
      >{{ $t('add') }}</el-button
      >
      <el-button
        v-btnPermission:edit
        :disabled="UpdateDisabled"
        type="primary"
        icon="el-icon-edit"
        @click="switchHandle('modify')"
      >{{ $t('modify') }}</el-button
      >
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="switchHandle('del')"
      >{{ $t('delete') }}</el-button
      >
    </div>
    <!-- 主体部分 -->
    <el-card class="box-card" shadow="never">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- 弹窗组件 -->
    <attrModel ref="attrModel" @initList="initList"/>
  </div>
</template>

<script>
import attributesApi from '@/api/system/attributes'
import attrModel from './module/form'
import mySetting from '@/mixins/mySetting'

export default {
  name: 'SystemSetting',
  components: { attrModel },
  mixins: [mySetting],
  // 数据字典
  data() {
    return {
      infoForm: {},
      searchTags: [
        { label: this.$t('parentAttribute'), prop: 'parentAttributeId', tag: 'DynSelect', id: 'name' },
        { label: this.$t('attributeName'), prop: 'attributeName', tag: 'DynSelect' },
        { label: this.$t('AttributeType'), prop: 'type', tag: 'DynInput' },
        { label: this.$t('attributeValue'), prop: 'attributeValue', tag: 'DynInput' }
      ],
      selectList: {},
      title: '', // 弹窗标题
      form: {},
      isDisabled: false, // 是否禁用表单内容
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        {
          prop: 'attributeName',
          label: this.$t('attributeName')
        },
        {
          prop: 'type',
          label: this.$t('AttributeType')
        },
        {
          prop: 'parentAttributeName',
          label: this.$t('parentAttribute')
        },
        {
          prop: 'attributeValue',
          label: this.$t('attributeValue')
        },
        {
          prop: 'description',
          label: this.$t('description')
        },
        {
          prop: 'createTime',
          label: this.$t('createTime')
        }
      ],
      tableLoading: true,
      job_status: [
        { key: 0, display_name: '禁用' },
        { key: 1, display_name: '激活' }
      ]
    }
  },
  created() {
    this.initList()
    this.getAttributenameList()
    this.getParentAttributeList()
  },
  methods: {
    switchHandle(val) {
      switch (val) {
        case 'add':
          this.handleClickAdd()
          break
        case 'del':
          this.handleDel()
          break
        case 'modify':
          this.modify()
          break
        default:
          break
      }
    },
    // 新增数据
    handleClickAdd() {
      this.$refs.attrModel.openDialog()
    },
    // 删除数据
    handleDel() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t('recordCount')}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('determine'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map((ele) => ele.id)
        attributesApi.del({ ids: ids }).then((res) => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    // 修改数据
    modify() {
      this.$refs.attrModel.openDialog(this.multipleSelection[0])
    },
    // 切换分页
    getList(page) {
      this.listQuery = page
      this.initList()
    },
    // 初始化列表
    async initList() {
      const res = await attributesApi.getList(this.$clearNull({ ...this.infoForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    // 点击查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 确认新增
    doSave() {
      this.listQuery.page = 1
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 关闭弹窗清空数据
    closeDialog() {
      this.isDisabled = false
      this.form = {}
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm(
        '此操作将 "' +
          this.job_status[val] +
          '" ' +
          data.attributeName +
          '属性, 是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          attributesApi
            .edit(data)
            .then(() => {
              this.crud.notify(this.job_status[val] + '成功', 'success')
            })
            .catch((err) => {
              data.enabled = !data.enabled
              console.log(err.data.message)
            })
        })
        .catch(() => {
          data.enabled = !data.enabled
        })
    },
    async getAttributenameList() {
      const res = await attributesApi.attributenamelist()
      this.$set(this.selectList, 'attributeName', res.data)
    },
    async getParentAttributeList() {
      const res = await attributesApi.parentattributelist()
      this.$set(this.selectList, 'parentAttributeId', res.data)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
